<template>
  <div class="common-layout">
    <el-container>
      <!-- 1.左侧菜单 -->
      <navMenu @menu-selected="handleMenuSelected" />

      <el-container>
        <!-- 2.右边头部 -->
        <el-header>
          <navHeader />
        </el-header>
        <!-- 3.右边主内容 -->
        <el-main class="right-main-content">
          <recommend ref="recommendComponent" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script setup>
import navHeader from './navHeader/navHeader.vue'
import navMenu from './navMenu/navMenu.vue'
import recommend from './navMain/recommend.vue'
import { ref } from 'vue';

const recommendComponent = ref(null);


// 菜单选择事件处理函数，这个id是子菜单的id 111111
// 这里我们直接调用子组件的scrollTo方法
function handleMenuSelected(id) {
  if (recommendComponent.value && recommendComponent.value.scrollTo) {
    recommendComponent.value.scrollTo(id);
  }
}


</script>

<style scoped></style>
